<template>
    <div id="bc">
        <el-form class="login-container" :model="regisrtForm" :rules="rules" ref="formRef" label-position="left" :label-width="formLabelWidth">
            <h1 class="title">注册</h1>

            <!-- 手机号 -->
            <el-form-item label="用户账号" prop="phone">
                <el-input type="text" placeholder="请输入11位手机号" v-model="regisrtForm.phone" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 用户名 -->
            <el-form-item label="用户名" prop="username">
                <el-input type="text" placeholder="请输入用户名" v-model="regisrtForm.username" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 年龄 -->
            <el-form-item label="年龄" prop="age">
                <el-input placeholder="请输入年龄" v-model.number="regisrtForm.age" autocomplete="off"></el-input>
            </el-form-item>

            <!-- 性别 -->
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="regisrtForm.gender">
                    <el-radio label="男">男</el-radio>
                    <el-radio label="女">女</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item label="账号密码" prop="userpassword">
                <el-input type="password" placeholder="请输入密码" v-model="regisrtForm.userpassword" show-password
                    autocomplete="off"></el-input>
            </el-form-item>

         
                <el-button type="primary" @click="handleRegister" :loading="loading" style="margin-bottom: 10px;">
                    注册
                </el-button>
 
            <el-link type="primary" @click=" goToLogin()">登录页面</el-link>
        </el-form>
    </div>
</template>
  
  <script setup lang="ts">
  import { ref, reactive } from 'vue';
  import {postRegisterAPI} from "@/api/user"
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  const loading = ref(false);
  
  const formLabelWidth = '80px'

  // 表单数据
  const regisrtForm = reactive({
    username: '',
    gender: '',
    age: 0,
    phone: '',
    userpassword: '',
  });
  
  // 表单验证规则
  const rules = reactive({
    phone: [
      { required: true, message: '请输入用户账号', trigger: 'blur' },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的11位手机号',
        trigger: 'blur'
      }
    ],
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    age: [
      { required: true, message: '请输入年龄', trigger: 'blur' },
      { type: 'number', message: '年龄需为数字', trigger: 'blur' }
    ],
    gender: [
      { required: true, message: '请选择性别', trigger: 'change' }
    ],
    userpassword: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ]
  });
  
  const formRef = ref<InstanceType<typeof import('element-plus/es')['ElForm']>>();

  // 注册逻辑
  const handleRegister = async () => {
    // 表单验证
    await formRef.value?.validate(async (valid) => {
      if (!valid) return;

      console.log("注册表单数据：",regisrtForm)

        // 调用注册接口
          const res = await postRegisterAPI(regisrtForm);
          if(res.message === "注册成功"){
            ElMessage.success('注册成功');
          }else{
            ElMessage.warning('手机号已被注册');
          }
        
    });
  };

  const goToLogin=()=>{
    router.push('/login');
  }
  </script>
  
  <style lang="scss" scoped>
#bc {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 20px; 
  box-sizing: border-box;
//   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* 添加背景渐变 */
  position: fixed; 
  top: 0;
  left: 0;
}

.login-container {
  width: 100%;
  max-width: 500px; 
  padding: 30px 35px 15px 35px;
  text-align: center;
  background: white;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); 
  transition: transform 0.3s ease; 
  
  /* 居中微调 */
  margin: auto;
  position: relative;
}

.title { margin: 0 0 40px 0; color: black; }
.el-button { width: 100%; height: 43px; }
.el-form-item { margin-bottom: 20px; }
.el-form-item:last-child { margin-bottom: 0; }
.el-form-item__error { padding-top: 4px; font-size: 12px; color: #f56c6c; }
</style>